<template>
  <!--  询价单-->
  <div class="createQuotation-index module-index">
    <breadcrumb-title :title="title"/>
    <div class="createQuotation-body module-body">
      <!--    创建询价单-->
      <div class="createQuotation-body-title">
        <div class="body-item-title">
          <span>创建询价单</span>
        </div>
        <div class="body-item-body">
        <span>
          &nbsp;&nbsp;
          <span style="color: red">*</span>
          订单号：系统自动生成
        </span>
        </div>
      </div>


      <!--    用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。-->
      <!--    如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。-->
      <!--    运输地址-->
      <transport-address ref="transport-address"/>
      <!--    计划时间-->
      <planed-time ref="planed-time"/>
      <!--    获取信息-->
      <load-information ref="load-information" :if-show="ifShow"/>
      <!--      备注-->
      <remarks ref="remarks"/>

      <div class="submit">
        <el-button @click="submit">提交</el-button>
        <el-button @click="$router.push({name: 'quotationManage'})">取消</el-button>
      </div>
    </div>

  </div>
</template>

<script>
import TransportAddress from "@/components/order/component/TransportAddress";
import BreadcrumbTitle from "@/components/title/BreadcrumbTitle";
import PlanedTime from "@/components/order/component/PlanedTime";
import LoadInformation from "@/components/order/component/LoadInformation";
import Remarks from "@/components/order/component/Remarks";
import {ifNullToObject} from "@/utils/constant/listElementCompute";
import {clientCreateQuotation} from "@/apis/client";

export default {
  name: "QuotationIndex",
  props: {},
  components: {
    BreadcrumbTitle,
    TransportAddress,
    PlanedTime,
    LoadInformation,
    Remarks,

  },
  data() {
    return {
      ifShow: true,
      title: '',
      data:{
        id: '',
        address: {}, // 运输地址
        planedTime: {}, // 计划时间
        loadInfo: {
          loadInformation: [],  // 货物信息
          total: {},  // 获取信息总数
        },
        remarks: '',
      }

    }
  },
  created() {

    this.init()
  },
  methods: {
    async init() {
      this.title = this.$route.meta.title

    },
    // this.$refs['transport-address'].value 查看组件中属性

    // 提交
    submit(){
      // 获取组件中的属性
      this.data.id = localStorage.getItem("id")
      this.data.address = this.$refs['transport-address'].data
      this.data.planedTime = this.$refs['planed-time'].data
      this.data.loadInfo = this.$refs['load-information'].data
      this.data.remarks = this.$refs['remarks'].data
      // 必要信息填写   递归算法进行判断
      if(!ifNullToObject(this.data)){this.$message.error("请将必要信息填写完整")}
      else{
        // 请求添加
        clientCreateQuotation(this.data).then(resp => {
          if(resp?.data?.code === 1){
            this.$message.success("添加成功")
            // 清空表单
            this.$router.push({name: 'quotationManage'}).catch(r => console.log(r))

          }else{
            this.$message.error(resp?.data?.msg)
          }
        })

      }
    },

  }
}
</script>

<style scoped lang="scss">

.createQuotation-index {

  .createQuotation-body {

    .createQuotation-body-title {
      width: 100%;
      height: 100px;
      border-bottom: 1px black solid;

      .body-item-body {
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-size: 18px;
      }

      .body-item-title {
        padding-left: 4px;
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        background-color: #B3C0D1;
      }
    }

    .submit{
      margin: 20px 0;
    }
  }

}


</style>